<template>
	
  <view class="schedule-box">
	  <view class="" style="height: 50rpx;">
	  	
	  </view>
    <nav-bar title="排班"></nav-bar>
    <view class="technician-check">
      <view class="label">选择技师：</view>
      <uni-data-select
        v-model="technicianId"
        placeholder="请选择技师"
        :localdata="technicianList"
        @change="changeTechnician"
      ></uni-data-select>
    </view>
    <calendar-box
      :scheduleData="scheduleData"
      @changeMonth="changeMonth"
      @chooseSchedule="chooseSchedule"
    ></calendar-box>
    <view class="confirm-schedule" @click="clickConfirm">确认排班</view>
    <you-popup
			:popupVisible="popupVisible"
			popupTitle="选择班次"
			bgColor="#fff"
			@popupClose="popupVisible = false"
		>
			<template slot="popupContent">
        <view class="radio-box">
          <view class="radio-label">班次：</view>
          <radio-group class="radio-group">
            <label class="radio-item" v-for="(item, index) in scheduleList" :key="item.id" @tap="clickRadio(item)">
              <radio
                style="transform: scale(0.7);"
                :value="item.value"
                :checked="checkSchedule === item.id"
                activeBackgroundColor="#c27e15"
              />
              <view>{{ item.name }}</view>
            </label>
          </radio-group>
        </view>
        <view class="confirm-btn" @click="confirmSchedule">确认</view>
			</template>
		</you-popup>
  </view>
</template>

<script>
  import NavBar from "@/components/nav-bar"
  import YouPopup from "@/components/you-popup/index.vue"
  import CalendarBox from './components/calendarBox.vue'
  import { fetchTechnicianList, fetchSchedule, sureSchedule, fetchTechSchedule } from '@/api/work'
  export default {
    name: 'Schedule',
    components: { NavBar, YouPopup, CalendarBox },
    data() {
      return {
        storeId: '',
        technicianId: '',
        technicianList: [],
        selectedDate: '',
        popupVisible: false,
        scheduleList: [],
        checkSchedule: '',
        scheduleData: {},
        chooseScheduleItem: {},
        chooseDate: ''
      }
    },

    onLoad(options) {
      this.storeId = options.storeId
      this.getTechnicianList()
      this.getScheduleList()
    },

    methods: {
      getFullData(data) {
        if (data > 9) return data
        if (data < 9) return '0' + data
      },
      // 获取技师列表
      getTechnicianList() {
        const params = {
          belongStoreId: this.storeId
        }
        fetchTechnicianList(params).then(res => {
          if (res.code !== 200) return
          this.technicianList = res.rows.map(item => {
            return {
              value: item.id,
              text: item.name,
              userId: item.userId
            }
          })
        })
      },
      // 更改技师获取排期信息
      changeTechnician() {
        const currentDate = new Date()
        const year = currentDate.getFullYear()
        const month = this.getFullData(currentDate.getMonth() + 1)
        let userId = ''
        this.technicianList.forEach(item => {
          if (item.value === this.technicianId) {
            userId = item.userId
          }
        })
        const params = {
          userId: userId,
          month: this.chooseDate || year + '-' + month
        }
		
        fetchTechSchedule(params).then(res => {
          if (res.code !== 200) return
          this.scheduleData = res.data.viewDate
        })
      },
      // 更改月份
      changeMonth(date) {
        this.chooseDate = date
        this.changeTechnician()
      },
      // 获取班次
      getScheduleList() {
        const params = {
          storeId: this.storeId
        }
        fetchSchedule(params).then(res => {
          if (res.code !== 200) return
          this.scheduleList = res.rows
        })
      },
      // 更改班次
      clickRadio(item) {
        this.chooseScheduleItem = item
      },
      // 选择班次
      chooseSchedule(value, schedule) {
        if (this.scheduleList.length === 0) {
          uni.showToast({
            title: '该门店暂无班次消息',
            icon: 'none'
          })
          return
        }
        this.checkSchedule = schedule ? schedule.classId : ''
        this.operateDate = value
        this.popupVisible = true
      },
      // 确认班次
      confirmSchedule() {
        this.scheduleData = {
          ...this.scheduleData,
          [this.operateDate]: [{
            classId: this.chooseScheduleItem.id,
            date: this.operateDate,
            shiftName: this.chooseScheduleItem.name
          }]
        }
        this.popupVisible = false
      },
      // 确认排期
      clickConfirm() {
        if (!this.technicianId) {
          uni.showToast({
            title: '请选择技师！',
            icon: 'none'
          })
          return
        }
        const params = {
          userId: this.technicianId,
          viewDate: this.scheduleData
        }
        sureSchedule(params).then(res => {
          if (res.code !== 200) return
          uni.showToast({
            title: '添加排期成功！',
            icon: 'none'
          })
          this.changeTechnician()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .schedule-box {
    padding: 0 34rpx;
  }
  ::v-deep .technician-check {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
    .label {
			font-weight: bold;
		}
		.uni-select {
			background-color: #FFF;
		}
  }
  .radio-box {
    display: flex;
    align-items: center;
    height: 60rpx;
    .radio-group {
      display: flex;
      align-items: center;
      .radio-item {
        display: flex;
        align-items: center;
        margin-right: 24rpx;
      }
    }
  }
  .confirm-btn,
  .confirm-schedule {
    width: 80%;
    height: 76rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40rpx auto 30rpx;
    border-radius: 38rpx;
    font-size: 32rpx;
    color: #FFF;
    background-color: #c2811c;
  }
  .confirm-schedule {
    width: 90%;
    margin-top: 80rpx;
  }
</style>